<template>
    <view class="content" :style="{height:`calc(100vh - ${tabbarHeight}upx)`}">
        <view class="top-desp-nav">
            <view class="desp-title">
                <text>AI</text>
                <text>助理</text>
            </view>
        </view>
        <view class="content-contain">
            <messageTip show-type="0" message="最近皮肤很干，毛孔很大，怎么办？"></messageTip>
            <messageTip show-type="1"
                        message="请您进行简单的皮肤测试，让我了解一下具体的皮肤状态，再告诉您对应的建议好吗？"></messageTip>
            <despShopRecom :is-shop="false" showType="3"></despShopRecom>
        </view>
        <view class="think-deeply" v-if="isThinkStart">
            <view class="throk-cont">正在思考</view>
            <view class="stop-click">
                <image src="/static/images/stop.png" style="width: 52upx;height: 52upx"></image>
            </view>
        </view>

        <view :style="{height:116+tabbarHeight+34+'upx'}"></view>

        <view class="foot-content" :style="{bottom:tabbarHeight+'upx'}">
            <view style="flex: 1;margin-right: 34upx" class="search-cont">
                <input class="search-input" placeholder="有什么问题快来问我吧" placeholder-class="sear-place-cont"
                       confirm-type="search"/>
            </view>
            <view style="width: 64upx;height: 64upx">
                <text class="iconfont icon-maikefeng" style="font-size: 64upx"></text>
            </view>
        </view>

        <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog mode="base" title="提示"
                              content="请完善个人信息来获取更好的体验！"
                              :duration="2000"
                              :before-close="true"
                              confirmText="前往"
                              :showClose="false"
                              border-radius="20px 20px 20px 20px"
                              @confirm="confirmSetInfo"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import messageTip from "@/components/message-tip/index.vue";
import despShopRecom from "@/components/desp-shop-recom/index.vue";

export default {
    components: {
        messageTip,
        despShopRecom
    },
    data() {
        return {
            tabbarHeight: 0,
            isThinkStart:false,
            userInfoObj:{}
        }
    },
    onLoad(options){
        if ('params' in options) {
            this.userInfoObj = JSON.parse(decodeURIComponent(options.params));
            if(!this.userInfoObj.nickname){
                this.$nextTick(()=>{
                    this.$refs.inputDialog.open()
                })
            }
        }
    },
    mounted() {
        // 获取系统信息
        let systemInfo = uni.getSystemInfoSync();
        this.tabbarHeight = systemInfo.windowBottom * 2
    },
    methods:{
        confirmSetInfo(){
            this.$tab.navigateTo('/pages/mine/info/edit')
        }
    }
}
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  background: linear-gradient(180deg, #DCDCFE 0%, #F1F4F5 100%);
  position: relative;
  padding-top: 190upx;

  .top-desp-nav {
    width: 100%;
    height: 180upx;
    background: #fff;
    border-bottom-left-radius: 80upx;
    border-bottom-right-radius: 80upx;
    margin-bottom: 8upx;
    //position: relative;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;

    .desp-title {
      position: absolute;
      bottom: 20upx;
      left: 60upx;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      font-size: 40upx;
      font-weight: 600;

      & > text:first-child {
        //font-style: italic;
        background: linear-gradient(
                        45deg, /* 渐变角度 */
                        rgb(60, 124, 252), /* 起始颜色 */
                        rgb(56, 139, 254) /* 结束颜色 */
        );
        -webkit-background-clip: text; /* 关键属性：背景裁剪为文本 */
        background-clip: text;
        color: transparent; /* 必须设置透明色 */
        margin-right: 4upx;
      }

      & > text:last-child {
        position: relative;

        &::before {
          content: '';
          display: inline-block;
          width: 50upx;
          height: 4upx;
          background: linear-gradient(149deg, #4D58F7 0%, #3798FF 100%);
          position: absolute;
          bottom: -7upx;
          left: -7upx;
        }
      }
    }
  }

  .content-contain {
    padding: 0 28upx;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    //margin-top: 180upx;
  }

  .foot-content {
    position: fixed;
    bottom: 4upx;
    left: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: 116upx;
    background: #FFFFFF;
    box-shadow: 0px -2upx 8upx 0px rgba(54, 151, 253, 0.15);
    display: flex;
    align-items: center;
    padding: 24upx 28upx;
    box-sizing: border-box;

    .search-cont {
      height: 68upx;
      background: #F7F7F7;
      border-radius: 102upx;
      border: 2upx solid #EEEEEE;
      padding: 14upx 0 14upx 40upx;
      box-sizing: border-box;


      .search-input {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28upx;
        color: #999;
      }

      .sear-place-cont {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28upx;
        color: rgba(102, 102, 102, 0.4);
      }
    }
  }

  .think-deeply {
    margin-top: 74upx;
    display: flex;
    align-items: center;
    padding: 0 28upx;

    .throk-cont {
      width: 152upx;
      height: 96upx;
      background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
      box-shadow: 0px 0px 12upx 0px rgba(25, 140, 255, 0.25);
      border-radius: 40upx;
      border: 2upx solid #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28upx;
      text-align: left;
      font-weight: 500;
      color: #4D57F9;
      margin-right: 20upx;
    }

    .stop-click {
      width: 96upx;
      height: 76upx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
      box-shadow: 0px 0px 12upx 0px rgba(25, 140, 255, 0.25);
      border-radius: 40upx;
      border: 2upx solid #FFFFFF;
    }
  }
}
</style>
